<!DOCTYPE html>
<html lang="zh">
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <meta content="zh-cn" http-equiv="Content-Language">
    <meta content="no" name="apple-mobile-web-app-capable"/>
    <meta content="yes" name="apple-touch-fullscreen"/>
    <meta content="telephone=no,email=no" name="format-detection"/>
    <meta content="white" name="apple-mobile-web-app-status-bar-style">
    <meta content="webkit" name="renderer"/>
    <meta content="webkit" name="force-rendering"/>
    <meta content="IE=Edge,chrome=1" http-equiv="X-UA-Compatible"/>
    <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
          name="viewport">
    <title>扫码支付</title>
    <link href="/i/css/pay.css" media="screen" rel="stylesheet">
    <link href="/i/img/favicon.ico" rel="shortcut icon"/>
    <script src="https://cdn.staticfile.org/jquery/1.8.3/jquery.min.js"></script>
    <style>
        body {
            font-family: PingFang SC, Helvetica Neue, Helvetica, microsoft yahei, arial, STHeiTi, sans-serif;
        }
    </style>
</head>

<body>
<div class="body" id="body">
    <h1 class="mod-title">

        <span class="ico_log ico-1" v-if="payType == 1"></span>
        <span class="ico_log ico-2" v-if="payType == 2"></span>

    </h1>

    <div class="mod-ct">
        <div class="order">
        </div>
        <div class="amount" id="timeOut" style="font-size: 20px;color: red;display: none;"><p>订单已过期，请您返回网站重新发起支付</p><br>
        </div>
        <div id="orderbody">
            <div class="amount" id="money">￥{{ reallyPrice }}</div>
            <div class="qrcode-img-wrapper" data-role="qrPayImgWrapper">
                <div class="qrcode-img-area" data-role="qrPayImg">
                    <div class="ui-loading qrcode-loading" data-role="qrPayImgLoading" style="display: none;">加载中</div>
                    <div style="position: relative;display: inline-block;">
                        <img :src="'<{url('api/api','Qr')}>?url='+payUrl" alt="加载中..." height="210" id='show_qrcode'
                             style="display: block;" width="210">
                    </div>
                </div>


            </div>
            <div class="time-item">


                <div class="time-item" id="msg">
                    <h1 v-if="price != reallyPrice">
                        <span style="color:red">为了您正常支付 请务必付款 {{ reallyPrice }} 元 <br>备注说明无需填写</span><br>


                    </h1>

                </div>

                <!--<div style="font-size: 30px;line-height: 50px;font-weight: 300;">
                    &lt;!&ndash;<span id="hour_show">00</span>:&ndash;&gt;
                    <span id="minute_show">00</span>
                    <span  style="width: 20px;font-size: 30px;line-height: 50px;font-family: Vernada,Microsoft Yahei;">:</span>
                    <span id="second_show">00</span>
                </div>-->


                <div class="remainseconds" style="width: 200px;margin: 0 auto;height: 100px;padding: 10px 35px;text-align: center;box-sizing: border-box;">
                    <div class="time minutes" style="width: 55px;height: 90px;float: left;box-sizing: border-box;"><b style="font-size: 40px;font-weight: 300;box-sizing: border-box;" id="minute_show">00</b> <em style="font-style:normal;color:#888;">分</em></div>
                    <div class="colon" style="float: left;width: 20px;font-size: 30px;line-height: 50px;font-family: Vernada,Microsoft Yahei;box-sizing: border-box;">:
                    </div>
                    <div class="time seconds" style="width: 55px;height: 90px;box-sizing: border-box;float: left;"><b style="font-size: 40px;font-weight: 300;box-sizing: border-box;" id="second_show">00</b> <em style="font-style:normal;color:#888;">秒</em></div>
                </div>

            </div>

            <div class="tip">
                <div class="tip-text">
                    <p>打开<span style="color:red">{{payType1}}</span>「扫一扫」
                        <span v-if="isAuto == 0"> 完成支付</span>
                        <span v-if="isAuto == 1"> 输入金额支付</span>
                    </p>


                </div>
            </div>

        </div>


        <div class="tip-text">

        </div>


    </div>


</div>
<div class="copyRight">

</div>

<script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js"></script>

<script>
    //后台api数据
    const Api_Ok = 0;//接口状态ok
    const Api_Err = -1;//接口状态错误
    //监控端
    const State_Online = 1;//监控在线
    const State_Offline = 0;//监控掉线
    const State_Nobind = -1;//监控还没绑定
    //递增递减
    const PayIncrease = 1;//递增
    const PayReduce = 2;//递减
    //订单状态常量定义
    const State_Succ = 3;//远程服务器回调成功，订单完成确认
    const State_Err = 2;//通知失败,回调服务器没有返回正确的响应信息
    const State_Ok = 1;//支付完成，通知成功
    const State_Wait = 0;//订单等待支付中
    const State_Over = -1;//订单超时
    //支付选择
    const NeedHtml = 1;//需要html
    const NeedData = 0;//我只要支付相关的数据
    //支付方式
    const PayWechat = 1;
    const PayAlipay = 2;

    var myTimer;

    function timer(intDiff) {
        var i = 0;
        i++;
        var day = 0,
            hour = 0,
            minute = 0,
            second = 0;//时间默认值
        if (intDiff > 0) {
            day = Math.floor(intDiff / (60 * 60 * 24));
            hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
            minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
            second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
        }
        if (minute <= 9) minute = '0' + minute;
        if (second <= 9) second = '0' + second;
        // $('#hour_show').html('<s id="h"></s>' + hour);
        $('#minute_show').html('<s></s>' + minute);
        $('#second_show').html('<s></s>' + second);
        if (hour <= 0 && minute <= 0 && second <= 0) {
            qrcode_timeout();
            clearInterval(myTimer);

        }
        intDiff--;

        myTimer = window.setInterval(function () {
            i++;
            var day = 0,
                hour = 0,
                minute = 0,
                second = 0;//时间默认值
            if (intDiff > 0) {
                day = Math.floor(intDiff / (60 * 60 * 24));
                hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
                minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
                second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
            }
            if (minute <= 9) minute = '0' + minute;
            if (hour <= 9) hour = '0' + hour;
            if (second <= 9) second = '0' + second;
            // $('#hour_show').html('<s id="h"></s>' + hour);
            $('#minute_show').html('<s></s>' + minute);
            $('#second_show').html('<s></s>' + second);
            if (hour <= 0 && minute <= 0 && second <= 0) {
                qrcode_timeout();
                clearInterval(myTimer);

            }
            intDiff--;
        }, 1000);
    }

    function formatDate(now) {
        now = new Date(now * 1000);
        return now.getFullYear()
            + "-" + (now.getMonth() > 8 ? (now.getMonth() + 1) : "0" + (now.getMonth() + 1))
            + "-" + (now.getDate() > 9 ? now.getDate() : "0" + now.getDate())
            + " " + (now.getHours() > 9 ? now.getHours() : "0" + now.getHours())
            + ":" + (now.getMinutes() > 9 ? now.getMinutes() : "0" + now.getMinutes())
            + ":" + (now.getSeconds() > 9 ? now.getSeconds() : "0" + now.getSeconds());

    }

    function qrcode_timeout() {
        document.getElementById("orderbody").style.display = "none";
        document.getElementById("timeOut").style.display = "";
    }


    function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r != null)
            return decodeURI(r[2]);
        return null;
    }

    $.post("<{url('api/api','GetOrder')}>", "orderId=" + getQueryString("orderId"), function (data) {
        data = JSON.parse(data);
        if (data.code === Api_Ok) {
          var time1 = <?php echo getMillisecond()?>;
            var time = time1 - data.data.date * 1000;
          //console.log(time);
            time = time / 1000;
            time = data.data.timeOut * 60 - time;
            if (data.data.state === State_Over.toString()) {
                time = 0;
            }
            timer(time);

            if (data.data.payType === PayWechat.toString()) {
                data.data.payType1 = "微信";
            } else {
                data.data.payType1 = "支付宝";
            }


            new Vue({
                el: '#body',
                data: data.data
            });

            check();
        } else {
            timer(0)
        }
    });

    function check() {
        $.post("<{url('api/api','OrderState')}>", "orderId=" + getQueryString("orderId"), function (data) {
            data = JSON.parse(data);
            if(data.code!==undefined&&data.code===-1){
                clearInterval(myTimer);
                qrcode_timeout();
                return;
            }

            if (data.state === State_Over) {
                clearInterval(myTimer);
            } else if (data.state >= State_Ok) {
                window.location.href = data.data;
            } else {

                setTimeout("check()", 1500);

            }
        })
    }

</script>
<?php
function getMillisecond() {
  list($s1, $s2) = explode(' ', microtime());
  return (float)sprintf('%.0f', (floatval($s1) + floatval($s2)) * 1000+60);
}
?>
</body>
</html>